<template>
	<view class="container">
		<map class="mapcs" @regionchange="handleRegionChange" :longitude="longitude" :latitude="latitude">
			<view class="floating-marker">
				<image style="width: 100%;height: 100%;" src="../../../../static/adderss/location.png" mode="">
				</image>
			</view>
		</map>


		<view class="popup-content" :style="{height:listHeight}">
			<u-input placeholder="请输入内容" border="surround" shape="circle"></u-input>

			<u-list class="list-container" @scrolltolower="scrolltolower">
				<u-list-item v-for="(item, index) in indexList" :key="index">
					<u-cell :title="item.address">
						
					</u-cell>
				</u-list-item>
			</u-list>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 0,
				longitude: 0,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					width: 50,
					height: 50,
					iconPath: '../../../../static/adderss/location.png'
				}, ],
				overlayLeft: 0, // 覆盖物相对于地图容器的左边距
				overlayTop: 0, // 覆盖物相对于地图容器的上边距
				show: true,
				indexList: [],
				urls: [
					'https://cdn.uviewui.com/uview/album/1.jpg',
					'https://cdn.uviewui.com/uview/album/2.jpg',
					'https://cdn.uviewui.com/uview/album/3.jpg',
					'https://cdn.uviewui.com/uview/album/4.jpg',
					'https://cdn.uviewui.com/uview/album/5.jpg',
					'https://cdn.uviewui.com/uview/album/6.jpg',
					'https://cdn.uviewui.com/uview/album/7.jpg',
					'https://cdn.uviewui.com/uview/album/8.jpg',
					'https://cdn.uviewui.com/uview/album/9.jpg',
					'https://cdn.uviewui.com/uview/album/10.jpg',
				],
				markerLongitude: 0, // 浮动标记的经度
				markerLatitude: 0, // 浮动标记的纬度
				markerAddress: '', // 浮动标记所在位置的地址
			}
		},
		onLoad() {
			this.loadmore()
		},
		computed: {
			// 计算列表高度
			listHeight() {
				// 获取屏幕高度
				const screenHeight = uni.getSystemInfoSync().windowHeight;
				// 计算列表高度为屏幕高度的一半
				return `${screenHeight / 1.5}px`;
			}
		},
		mounted() {

			this.getLocation();
			this.calculateHeight();
		},
		created() {
			// #ifdef APP
			this.gegetLocation()
			// #endif

			this.getLocation()
		},
		methods: {
			calculateHeight() {
				const screenHeight = window.innerHeight; // 或者使用 uni.getSystemInfoSync().windowHeight;
				const headerHeight = 100; // 假设头部高度为 100px
				this.mapcsHeight = screenHeight - headerHeight + 'px';
			},
			// 地图拖动事件处理函数
			handleRegionChange(event) {
				this.indexList=[]
				console.log(event);
				if (event.type === 'begin') {
					// 拖动开始时获取浮动标记的经纬度坐标
					this.markerLongitude = this.longitude;
					this.markerLatitude = this.latitude;
				} else if (event.type === 'end') {
					// 拖动结束时获取浮动标记所在位置的地址信息
					this.getAddress(this.markerLongitude, this.markerLatitude);
				}
			},
			scrolltolower() {
				// this.loadmore()
			},
			loadmore() {
				for (let i = 0; i < 30; i++) {
					this.indexList.push({
						url: this.urls[uni.$u.random(0, this.urls.length - 1)]
					})
				}
			},
			getLocation() {
				uni.getLocation({
					type: 'wgs84',
					success: res => {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						this.longitude = res.longitude;
						this.latitude = res.latitude;
						// 初始位置也作为浮动标记的位置
						 this.getAddress(this.longitude, this.latitude);
					}
				});
			},
			getAddress(longitude, latitude) {
				uni.request({
					url: 'https://restapi.amap.com/v3/geocode/regeo',
					data: {
						key: 'f421da4fd9680317f682c9654897276c', // 替换为你的高德地图API密钥
						location: `${longitude},${longitude}`,
						output: 'json'
					},
					success: res => {
						console.log('逆地理编码结果：', res);
						if (res.data.status === '1' && res.data.regeocode && res.data.regeocode
							.formatted_address) {
							// 如果请求成功，并且返回了地址信息，将地址信息保存到 markerAddress 中
							this.markerAddress = res.data.regeocode.formatted_address;
						   console.log(res);
						   this.getNearbyAddresses(this.longitude,this.latitude)
						} else {
							console.error('逆地理编码失败');
						}
					},
					fail: err => {
						console.error('请求逆地理编码API失败：', err);
					}
				})

			},
			getNearbyAddresses(longitude, latitude) {
			    uni.request({
			        url: 'https://restapi.amap.com/v3/place/around',
			        data: {
			            key: 'f421da4fd9680317f682c9654897276c', // 替换为您的高德地图API密钥
			            location: `${longitude},${latitude}`, // 中心点的经纬度
			            radius: 1000, // 搜索半径，单位：米
			            output: 'json'
			        },
			        success: res => {
			            console.log('周边检索结果：', res);
			            if (res.data.status === '1' && res.data.pois && res.data.pois.length > 0) {
			                // 如果请求成功，并且返回了周边地址信息，可以遍历处理每个地址信息
			                res.data.pois.forEach(item => {
			                    console.log('周边地址：', item.name);
								
			                });
							this.indexList=res.data.pois
			            } else {
			                console.error('周边检索失败');
			            }
			        },
			        fail: err => {
			            console.error('请求周边检索API失败：', err);
			        }
			    });
			}

		}
	}
</script>
<style>
	.container {
		/* position: relative; */
		display: flex;
		flex-direction: column;
	
		/* 占据整个屏幕高度 */
	}
	
	.list-container {
		height: 100%!important;
	}
	
	
	
	.mapcs {
		position: relative;
		width: 100%;
		height: 300px;
	
	}
	
	.popup-content {
		padding: 1rem;
		background-color: #ffffff;
		/* height: 300px; */
		/* 默认固定高度，可根据需要调整 */
		/* 设置弹出框内容的高度为屏幕高度的80% */
	}
	
	.floating-marker {
		position: absolute;
		top: 50%;
		/* 设置合适的位置，这里示例设置在地图中央 */
		left: 50%;
		width: 2rem;
		height: 2rem;
		border-radius: 50%;
		transform: translate(-50%, -50%);
		z-index: 9;
		/* 确保覆盖在地图上方 */
	}
	
	/* 媒体查询，根据不同的屏幕高度设置不同的固定高度 */
	@media screen and (max-height: 667px) {
	
		/* iPhone 6/7/8/SE2 屏幕高度小于等于667px时，设置固定高度为500px */
		.mapcs {
			height: 230px;
		}
	}
	
	@media screen and (max-height: 812px) {
	
		/* iPhone X/XS/11 Pro 屏幕高度小于等于812px时，设置固定高度为600px */
		/* .popup-content {
			height: 400px;
		} */
	}
</style>